<%@ page import="cn.js.fan.util.ParamUtil" %>
<%@ page import="com.redmoon.oa.person.UserDesktopSetupDb" %>
<%@ page import="cn.js.fan.util.StrUtil" %>
<%@ page import="com.redmoon.oa.flow.FormDb" %>
<%@ page import="com.cloudwebsoft.framework.util.LogUtil" %>
<%@ page import="com.redmoon.oa.pvg.Privilege" %>
<%@ page import="com.redmoon.oa.visual.*" %>
<%@ page import="cn.js.fan.util.ErrMsgException" %>
<%@ page import="com.redmoon.oa.sys.DebugUtil" %>
<%@ page import="com.alibaba.fastjson.JSONArray" %>
<%@ page import="com.redmoon.oa.flow.FormField" %>
<%@ page import="com.redmoon.oa.flow.FormParser" %>
<%@ page import="com.redmoon.oa.basic.SelectDb" %>
<%@ page import="com.redmoon.oa.basic.SelectOptionDb" %>
<%@ page import="java.util.Vector" %>
<%@ page import="com.redmoon.oa.chart.ChartUtil" %>
<%@ page contentType="text/html;charset=utf-8" %>
<%
    int id = ParamUtil.getInt(request, "id", -1);
    UserDesktopSetupDb udsd = new UserDesktopSetupDb();
    udsd = udsd.getUserDesktopSetupDb(id);
    long chartId = StrUtil.toLong(udsd.getMetaData(), -1);
    if (chartId == -1) {
        out.print("请设置关联的图形");
        return;
    }

    String chartFormCode = "config_chart";
    FormDb fdChart = new FormDb();
    fdChart = fdChart.getFormDb(chartFormCode);
    FormDAO fdaoChart = new FormDAO();
    fdaoChart = fdaoChart.getFormDAO(chartId, fdChart);
    String title = fdaoChart.getFieldValue("title");
    String fieldName = fdaoChart.getFieldValue("field_name");
    String moduleCode = fdaoChart.getFieldValue("module_code");

    ModuleSetupDb msd = new ModuleSetupDb();
    msd = msd.getModuleSetupDb(moduleCode);
    if (msd == null) {
        DebugUtil.e(getClass(), "getModuleSetupDb", "模块：" + moduleCode + "不存在！");
        out.print("模块：" + moduleCode + "不存在！");
        return;
    }
    String formCode = msd.getString("form_code");

    FormDb fd = new FormDb();
    fd = fd.getFormDb(formCode);
    FormField ff = fd.getFormField(fieldName);
    if (ff == null) {
        out.print("字段：" + fieldName + " 不存在");
        return;
    }

    JSONArray arr = null;
    try {
        arr = ChartUtil.getDataForChart(request, msd, fd, ff);
    } catch (ErrMsgException e) {
        out.print(e.getMessage());
        return;
    }
%>
<div id="drag_<%=id%>" class="portlet drag_div bor ibox" style="padding:0;">
    <div id="drag_<%=id%>_h" style="height:3px;padding:0;margin:0;font-size:1px"></div>
    <div class="portlet_content ibox-content" style="height:293px !important;padding:0;margin:0;border: 0">
        <div style="height: 24px; text-align: center"><%=udsd.getTitle()%></div>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="pieBox<%=id%>" style="width: 380px; height:266px;"></div>
        <script type="text/javascript">
            // 解决ECharts Can't get dom width or height!无法初始化图表的问题
            /*var mainContainer = document.getElementById('pieBox');
            //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeMainContainer = function () {
                mainContainer.style.width = window.innerWidth+'px';
                mainContainer.style.height = window.innerHeight*0.8+'px';
            };
            //设置div容器高宽
            resizeMainContainer();*/

            var myChart = echarts.init(document.getElementById('pieBox<%=id%>'));

            var arr1 = [60,73,85,40,60,90];
            var i = -1;
            var optionRadar = {
                title: {
                    // text: '基础雷达图'
                },
                legend: { // 图例组件
                    show: true,
                    icon: 'rect',
                    // 图例项的 icon。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通过 'image://url' 设置为图片，其中 url 为图片的链接，或者 dataURI。可以通过 'path://' 将图标设置为任意的矢量路径。
                    top: '40%',
                    // 图例距离顶部边距
                    left: '5%',
                    // 图例距离左侧边距
                    itemWidth: 10,
                    // 图例标记的图形宽度。[ default: 25 ]
                    itemHeight: 10,
                    // 图例标记的图形高度。[ default: 14 ]
                    itemGap: 30,
                    // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                    orient: 'vertical',
                    // 图例列表的布局朝向,'horizontal'为横向,''为纵向.
                    textStyle: { // 图例的公用文本样式。
                        fontSize: 15,
                        color: '#fff'
                    },
                    data: [{ // 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。
                        name: '预算',
                        // 图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。
                        icon: 'rect',
                        // 图例项的 icon。
                        textStyle: { // 图例项的文本样式。
                            color: 'rgba(51,0,255,0.3)',
                            fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
                        }
                    },
                    {
                        name: '开销',
                        icon: 'rect',
                        textStyle: {
                            color: 'rgba(255,0,0,0.3)',
                            fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
                        }
                    }]
                },
                radar: {
                    center: ['50%', '52%'], // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                    radius: 95,
                    shape: 'circle', // circle，polygon
                    splitNumber: 4, // 圆的环数，指示器轴的分割段数。[ default: 5 ]
                    indicator: [
                        { name: '销售', max: 6500},
                        { name: '管理', max: 16000},
                        { name: '信息技术', max: 30000},
                        { name: '客服', max: 38000},
                        { name: '研发', max: 52000},
                        { name: '市场', max: 25000}
                    ],
                    name: { // (圆外的标签)雷达图每个指示器名称的配置项。
                        formatter: '{value}',
                        textStyle: {
                            fontSize: 15,
                            color: '#000'
                        }
                    },
                    /*name: {
                        // 只有一条数据时，可以使用该方法，显示单数据
                        formatter: (a, b) => {
                            console.log(b);
                            i++;
                            return `${a}\n${arr1[i]}`;
                        }
                    }*/
                },
                series: [{
                    name: '预算 vs 开销',
                    type: 'radar',
                    itemStyle: { // 折线拐点标志的样式。
                        normal: { // 普通状态时的样式
                            lineStyle: {
                                width: 1
                            },
                            opacity: 0.2
                        },
                        emphasis: { // 高亮时的样式
                            lineStyle: {
                                width: 5
                            },
                            opacity: 1
                        }
                    },
                    data: [
                        {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '预算',
                            symbol: 'circle',
                            symbolSize: 5,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    distance: 5,
                                    color: 'rgba(51,0,255,1)',
                                    fontSize: 14,
                                    formatter: function(params) {
                                        return params.value;
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(51,0,255,1)',
                                    borderWidth: 3,
                                }
                            },
                            lineStyle: {
                                normal: {
                                    opacity: 0.5
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: 'rgba(51,0,255,0.1)'
                                }
                            }
                        },
                        {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '开销',
                            symbol: 'circle',
                            // 单个数据标记的图形。
                            symbolSize: 5,
                            // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                            label: { // 单个拐点文本的样式设置
                                normal: {
                                    show: true,
                                    // 单个拐点文本的样式设置。[ default: false ]
                                    position: 'top',
                                    // 标签的位置。[ default: top ]
                                    distance: 5,
                                    // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                                    color: 'rgba(255,0,0,1)',
                                    // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                                    fontSize: 14,
                                    // 文字的字体大小
                                    formatter: function(params) {
                                        return params.value;
                                    }
                                }
                            },
                            itemStyle: { // 单个拐点标志的样式设置。
                                normal: {
                                    borderColor: 'rgba(255,0,0,1)',
                                    // 拐点的描边颜色。[ default: '#000' ]
                                    borderWidth: 3,
                                    // 拐点的描边宽度，默认不描边。[ default: 0 ]
                                }
                            },
                            lineStyle: { // 单项线条样式。wallpaper_sel
                                normal: {
                                    opacity: 0.5 // 图形透明度
                                }
                            },
                            areaStyle: { // 单项区域填充样式
                                normal: {
                                    color: 'rgba(255,0,0,0.1)' // 填充的颜色。[ default: "#000" ]
                                }
                            }
                        }
                    ]
                }]
            };

            myChart.setOption(optionRadar);

            /*jQuery(window).on('resize',function(){//
                //屏幕大小自适应，重置容器高宽
                resizeMainContainer();
                myChart.resize();
            });*/
        </script>
    </div>
</div>
